<template lang="html">
  <div id="checkBar" :class="{showChoice: showChoice}" @touchmove.prevent="" @click="showChoice = false;active = ''">
    <ul class="filter-list">
      <li class="filter-item" data-type="QY" @click.stop="filterClick" :class="{active: active === 'QY'}">
        <span :class="{spanActive: brandFilterData.regionValue}">{{brandFilterData.regionValue || '区域'}}</span><i></i>
      </li>
      <li class="filter-item" data-type="ZJ" @click.stop="filterClick" :class="{active: active === 'ZJ'}">
        <span :class="{spanActive: brandFilterData.rentalPriceValue}">{{brandFilterData.rentalPriceValue || '租金'}}</span><i></i>
      </li>
      <li class="filter-item" data-type="YJFS" @click.stop="filterClick" :class="{active: active === 'YJFS'}">
        <span :class="{spanActive: brandFilterData.freeDepositValue}">{{brandFilterData.freeDepositValue || '押金'}}</span><i></i>
      </li>
      <li class="filter-item" data-type="GS" @click.stop="filterClick" :class="{active: active === 'GS'}">
        <span :class="{spanActive: brandFilterData.brandValue}">{{brandFilterData.brandValue || '归属'}}</span><i></i>
      </li>
    </ul>
    <div class="filter-condition" v-if="showChoice" @click.stop.prevent="">
      <!-- 区域筛选条件 -->
      <div class="area-conditions" v-show="active === 'QY'">
        <!-- <p class="condition-title" v-if="regions.length > 0">区域</p> -->
        <ul class="condition-box">
          <li class="condition-item width-23" :class="{active: brandFilterData.region === condition.code}" v-for="condition in regions" :key="condition.id" @click="selectCondition('QY', condition)">{{condition.value}}</li>
        </ul>
      </div>
      <!-- 租金筛选条件 -->
      <div class="rental-conditions" v-show="active === 'ZJ'">
        <ul class="condition-box">
          <li class="condition-item width-32" :class="{active: brandFilterData.rentalPrice === condition.code}" v-for="condition in rentalPrices" :key="condition.id" @click="selectCondition('ZJ', condition)">{{condition.value}}</li>
        </ul>
      </div>
      <!-- 押金筛选条件 -->
      <div class="rental-conditions" v-show="active === 'YJFS'">
        <ul class="condition-box">
          <li class="condition-item width-32" :class="{active: brandFilterData.freeDeposit === condition.code}" v-for="condition in pledgePrices" :key="condition.code" @click="selectCondition('YJFS', condition)">{{condition.value}}</li>
        </ul>
      </div>
      <!-- 筛选条件 -->
      <div class="filtrate-conditions" v-show="active === 'GS'">
        <!-- <p class="condition-title" v-if="brands.length > 0">品牌</p> -->
        <ul class="condition-box">
          <li class="condition-item width-23" :class="{active: brandFilterData.brand === condition.code}" v-for="(condition, index) in brands" :key="condition.id" @click="selectCondition('GS', condition)">{{condition.value}}</li>
        </ul>
      </div>
    </div>

    <div class="btns" v-if="showChoice">
      <p class="btn-clear" @click.stop="clearCondition">清理筛选</p>
      <p class="btn-sure" @click="submitCondition">确 定</p>
    </div>
  </div>

</template>

<script>
export default {
  props: {
    showType: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      showChoice: false, // 显示筛选条件
      active: '', // 当前激活的筛选条件
      regions: [], // 区域筛选条件
      rentalPrices: [], // 租金筛选条件
      pledgePrices: [], // 押金筛选条件
      brands: [], // 品牌筛选条件
      brandFilterData: {
        region: '', // 地区编码
        regionValue: '', // 地区名称
        rentalPrice: '', // 租金编码
        rentalPriceValue: '', // 租金名称
        freeDeposit: '', // 押金编码
        freeDepositValue: '', // 押金名称
        brand: '', // 归属编码
        brandValue: '' // 归属名称
      }
    }
  },
  created () {
    let brandFilterData = JSON.parse(window.localStorage.getItem('brandFilterData') || '{}')
    if (Object.keys(brandFilterData).length) {
      this.brandFilterData = brandFilterData
    }
  },
  methods: {
    // 获取筛选条件
    getData (codeType) {
      let type = codeType
      var data = []
      if (localStorage.getItem(codeType)) {
        data = JSON.parse(localStorage.getItem(codeType))
        this.setData(codeType, data)
      } else {
        this.$axiosPosting(this.$api.getHouseAttributeByCodeType, { codeType: type }).then(res => {
          if (res.code === '0000') {
            data = res.data
            this.setData(type, data)
            // localStorage.setItem(codeType, JSON.stringify(res.data))
          }
        })
      }
    },
    // 筛选条件赋值至data中
    setData (codeType, data) {
      switch (codeType) {
        case 'QY':
          this.regions = data
          break
        case 'ZJ':
          this.rentalPrices = data
          break
        case 'YJFS':
          this.pledgePrices = data
          break
        case 'GS':
          this.brands = data
          break
      }
      this.showChoice = true
    },
    filterClick (e) {
      if (this.active === e.currentTarget.getAttribute('data-type')) {
        this.showChoice = false
        this.active = ''
      } else {
        this.active = e.currentTarget.getAttribute('data-type')
        this.getData(this.active)
      }
    },
    // 选择筛选条件
    selectCondition (type, condition) {
      switch (type) {
        case 'QY':
          this.brandFilterData.region = condition.code
          this.brandFilterData.regionValue = condition.value
          break
        case 'ZJ':
          this.brandFilterData.rentalPrice = condition.code
          this.brandFilterData.rentalPriceValue = condition.value
          break
        case 'YJFS':
          this.brandFilterData.freeDeposit = condition.code
          this.brandFilterData.freeDepositValue = condition.value
          break
        case 'GS':
          this.brandFilterData.brand = condition.code
          this.brandFilterData.brandValue = condition.value
          break
      }
    },
    // 清理筛选
    clearCondition () {
      switch (this.active) {
        case 'QY':
          this.brandFilterData.region = ''
          this.brandFilterData.regionValue = ''
          break
        case 'ZJ':
          this.brandFilterData.rentalPrice = ''
          this.brandFilterData.rentalPriceValue = ''
          break
        case 'YJFS':
          this.brandFilterData.freeDeposit = ''
          this.brandFilterData.freeDepositValue = ''
          break
        case 'GS':
          this.brandFilterData.brand = ''
          this.brandFilterData.brandValue = ''
          break
      }
    },
    submitCondition () {
      localStorage.setItem('brandFilterData', JSON.stringify(this.brandFilterData)) // 存储选择条件
      this.$emit('brandFilter', this.brandFilterData)
      this.showChoice = false
    }
  }
}
</script>

<style lang="less">
  @import "../../styles/baseVar.less";
  .filter-wrap.showChoice{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: white;
  }
  #checkBar{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background: white;
    ul, li{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .filter-list{
      display: flex;
      background: #fff!important;
      justify-content: space-around;
      border-bottom: 1px solid #eee;
      // align-items: center;
      line-height: 50px;
      width: 100%;
      height: 50px; /* 60/40 */
      .filter-item{
        display: flex;
        flex: 1;
        max-width: 33%;
        padding: 0 10px;
        position: relative;
        justify-content: center;
        align-items: center;
        font-size: 14px; /* 28/40 */
        color: #343434;
        box-sizing: border-box;
        &::before{
          content: '';
          position: absolute;
          height:14px;
          top: 18px;
          width:1px;
          background: #ccc;
          left: 0px;
        }
        &:nth-of-type(1)::before{
          display: none;
        }
        span{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .spanActive{
          color: #ff9600;
        }
        i{
          display: block;
          margin-left: 5px;
          width: 0;
          height: 0;
          border: 4px solid transparent;
          border-top-color: #bbb;
          border-bottom: 0;
        }
      }
    }
    &.showChoice{
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0px;
      right: 0;
      left: 0;
      min-height: 100vh;
      background: rgba(0, 0, 0, .3);
      z-index: 500;
      .filter-list{
        // padding: 0 12px;
        background: #fff!important;
        box-sizing: border-box;
        height: 50px;
        .filter-item.active{
          color: @theme-button-cancel-font-color;
          &:after{
            border-top-color: @theme-button-cancel-font-color;
          }
        }
      }
      .filter-condition{
        padding: 15px 10px 0;
        background: #fff;
        box-sizing: border-box;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        .condition-title{
          font-size: 10px;
          text-align: center;
          margin-bottom: 7px;
          color: @color-999999;
        }
        .condition-box{
          display: flex;
          flex-wrap: wrap;
          .condition-item{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 34px;
            margin: 0 10px 10px 0;
            font-size: 12px;
            color: #585858;
            border: 1px solid #e9e9e9;
            border-radius: 3px;
            box-sizing: border-box;
            &.width-23{
              width: 23.5%;
              margin-right: 2%;
              &:nth-child(4n){
                margin-right: 0;
              }
            }
            &.width-32{
              width: 32%;
              margin-right: 2%;
              &:nth-child(3n){
                margin-right: 0;
              }
            }
            // height: 25px;
            // text-align: center;
            // line-height: 25px;
            // font-size: 12px;
            // border-radius: 3px;
            // border: 1px solid @border-color;
            // color: #666;
            // background: #fff;
            // margin-bottom: 7px;
            // box-sizing: border-box;
            &.active{
              color: #ff9600;
              border-color: #ff9600;
            }
          }
        }
      }
      .btns{
        padding: 20px 14px 24px;
        display: flex;
        height: 45px;
        font-size: 16px;
        background: #fff;
        .btn-clear{
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: center;
          border: 1px solid #ff9600;
          border-radius: 3px;
          margin-right: 10px;
          color: #ff9600;
        }
        .btn-sure{
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: center;
          border-radius: 3px;
          color: #fff;
          background: #ff9600;
        }
      }
    }
  }
</style>
